<template>
	<view class="container">
		<!-- 轮播图 -->
		<view class="swiper-box">
			<u-swiper name="image" mode="none" height="280" :list="swiperList" :border-radius="20"></u-swiper>
		</view>
		<!-- 分类 -->
		<u-tabs :list="goodsClassList" name="name" bg-color="#f5f5f5" active-color="#000" :current="current" @change="tabChange"></u-tabs>
		<!-- 商品列表 -->
		<goods-waterfall ref="waterfall" :list="goodsList" :loadStatus="loadStatus"></goods-waterfall>
	</view>
</template>

<script>
import API from '../../utils/api.js';
import goodsWaterfall from '@/components/goods-waterfall/goods-waterfall';
export default {
	components: {
		goodsWaterfall
	},
	data() {
		return {
			current: 0,
			swiperList: [
				{
				button: "立即下载",
				id: 1,
				image: "https://i.imgtg.com/2022/11/18/t0vKG.png",
				introduce: "您身边的源码专家",
				title: "苏宁源码",
				}
			],
			loadStatus: 'loadmore',
			goodsList: [],
			goodsClassList: [
				{
					describes: null,
					father: null,
					id: 20,
					imgclass: "https://www.hereitis.cn/profile/upload/2021/10/27/10cfe819-b854-4f40-ab4b-04896f5c73b7.jpg",
					name: "图形设计",
					num: null,
					otherName: "graphics",
					top: null
				}
			],
			goodsClassId: '',
			page: 1,
			keyword: '',
			navList: []
		};
	},
	onLoad() {
		this.getGoodsClass();
		this.getGoodsList();
		this.getLinkList(); 
	},
	onReachBottom() {
		this.page++;
		this.getGoodsList();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.goodsList = [];
		this.getGoodsClass();
		this.getGoodsList();
	
		this.getLinkList();

		uni.stopPullDownRefresh();
	},
	methods: {
		getLinkList() {
			let that = this;
			uni.request({
				url: API.GetSwiperPost(),
				success: res => {
					this.swiperList  = res.data.map(item=>{
						item.image = item.img;
						return item
					})
				}
			});
		},
		tabChange(index) {
			this.current = index;
			this.goodsList = [];
			this.goodsClassId = this.goodsClassList[index].id;
			this.page = 1;
			this.$refs.waterfall.clear();
			this.getGoodsList();
		},
		getGoodsClass() {//获取商品分类列表
			uni.request({
				url: API.GetCat(),
				success: res => {
					console.log(res.data)
					this.goodsClassList = res.data;							
				}
			});			
		},
		getGoodsList() {//得到商品列表
			this.loadStatus = 'loading';

			uni.request({
				url: API.GetAllResource(this.page, 5),
				success: res => {
					console.log(res)
					this.goodsList = this.goodsList.concat(res.data.data);
							if (this.goodsList.length >= res.data.total) {
								this.loadStatus = 'nomore';
							}
							else {
								this.loadStatus = 'loadmore';
							}
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.swiper-box {
	margin-bottom: 20rpx;
}
</style>
